<!DOCTYPE html>
<html>
<head>
<title>Coaxial Cable Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Helper function to draw an arrow
  function drawArrow(ctx, fromx, fromy, tox, toy) {
    const headlen = 10;
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }
  
  // Drawing parameters
  const cy = canvas.height / 2;
  const length = 400;
  const x_left = (canvas.width - length) / 2;
  const x_right = x_left + length;
  
  const a = 40; // radius a in pixels
  const b = 80; // radius b in pixels
  const perspective = 0.25; // for ellipse horizontal radius
  const hx_a = a * perspective;
  const hx_b = b * perspective;

  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;
  ctx.fillStyle = 'black';

  // 1. Draw the central axis
  ctx.save();
  ctx.setLineDash([10, 5]);
  ctx.beginPath();
  ctx.moveTo(0, cy);
  ctx.lineTo(canvas.width, cy);
  ctx.stroke();
  ctx.restore();

  // 2. Draw the outer cylinder
  // Top and bottom lines
  ctx.beginPath();
  ctx.moveTo(x_left, cy - b);
  ctx.lineTo(x_right, cy - b);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(x_left, cy + b);
  ctx.lineTo(x_right, cy + b);
  ctx.stroke();

  // Left and right end ellipses
  ctx.beginPath();
  ctx.ellipse(x_left, cy, hx_b, b, Math.PI / 2, 0, 2 * Math.PI);
  ctx.stroke();

  ctx.beginPath();
  ctx.ellipse(x_right, cy, hx_b, b, Math.PI / 2, 0, 2 * Math.PI);
  ctx.stroke();

  // 3. Draw the inner cylinder
  // Top and bottom lines
  ctx.beginPath();
  ctx.moveTo(x_left, cy - a);
  ctx.lineTo(x_right, cy - a);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(x_left, cy + a);
  ctx.lineTo(x_right, cy + a);
  ctx.stroke();
  
  // Left end ellipse (solid)
  ctx.beginPath();
  ctx.ellipse(x_left, cy, hx_a, a, Math.PI / 2, 0, 2 * Math.PI);
  ctx.stroke();

  // Right end ellipse (dashed)
  ctx.save();
  ctx.setLineDash([6, 4]);
  ctx.beginPath();
  ctx.ellipse(x_right, cy, hx_a, a, Math.PI / 2, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.restore();

  // 4. Draw dimensions and labels
  ctx.font = 'italic 24px Times New Roman';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  
  // Dimension l
  const y_l = cy + b + 60;
  const y_l_line = cy + b + 50;
  ctx.beginPath();
  ctx.moveTo(x_left, y_l_line - 10);
  ctx.lineTo(x_left, y_l_line + 10);
  ctx.moveTo(x_right, y_l_line - 10);
  ctx.lineTo(x_right, y_l_line + 10);
  ctx.stroke();
  drawArrow(ctx, x_right, y_l_line, x_left, y_l_line); // Draw the line with arrow head at the left
  drawArrow(ctx, x_left, y_l_line, x_right, y_l_line); // Draw the line with arrow head at the right
  ctx.fillText('l', (x_left + x_right) / 2, y_l);

  // Dimension a
  const x_a = x_left + 100;
  ctx.beginPath();
  ctx.moveTo(x_a, cy);
  ctx.lineTo(x_a, cy - a);
  ctx.stroke();
  drawArrow(ctx, x_a, cy, x_a, cy - a);
  ctx.textAlign = 'right';
  ctx.fillText('a', x_a - 8, cy - a / 2);

  // Dimension b
  const x_b = x_left + 150;
  ctx.beginPath();
  ctx.moveTo(x_b, cy);
  ctx.lineTo(x_b, cy - b);
  ctx.stroke();
  drawArrow(ctx, x_b, cy, x_b, cy - b);
  ctx.textAlign = 'left';
  ctx.fillText('b', x_b + 8, cy - b / 2);

  // 5. Draw current arrows and labels
  ctx.font = 'italic bold 24px Times New Roman';
  
  // Outer top current (I ->)
  const y_I_outer_top = cy - b - 15;
  const x_I_outer_start = x_left + length * 0.55;
  const x_I_outer_end = x_I_outer_start + 80;
  drawArrow(ctx, x_I_outer_start, y_I_outer_top, x_I_outer_end, y_I_outer_top);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.fillText('I', (x_I_outer_start + x_I_outer_end) / 2, y_I_outer_top - 5);
  
  // Inner top current (<- I)
  const y_I_inner_top = cy - a/2 -5;
  const x_I_inner_end = x_left + length * 0.45;
  const x_I_inner_start = x_I_inner_end + 80;
  drawArrow(ctx, x_I_inner_start, y_I_inner_top, x_I_inner_end, y_I_inner_top);
  ctx.fillText('I', (x_I_inner_start + x_I_inner_end) / 2, y_I_inner_top - 5);

  // Inner bottom current (<- I)
  const y_I_inner_bot = cy + a/2 + 5;
  const x_I_inner_bot_end = x_left + length * 0.45;
  const x_I_inner_bot_start = x_I_inner_bot_end + 80;
  drawArrow(ctx, x_I_inner_bot_start, y_I_inner_bot, x_I_inner_bot_end, y_I_inner_bot);
  ctx.textBaseline = 'top';
  ctx.fillText('I', (x_I_inner_bot_start + x_I_inner_bot_end) / 2, y_I_inner_bot + 5);

  // Outer bottom current (<- I)
  const y_I_outer_bot = cy + b + 15;
  const x_I_outer_bot_end = x_left + length * 0.25;
  const x_I_outer_bot_start = x_I_outer_bot_end + 80;
  drawArrow(ctx, x_I_outer_bot_start, y_I_outer_bot, x_I_outer_bot_end, y_I_outer_bot);
  ctx.fillText('I', (x_I_outer_bot_start + x_I_outer_bot_end) / 2, y_I_outer_bot + 5);

</script>
</body>
</html>